<!--
 * @Date: 2024-12-02 16:13:13
 * @Author: LiSong
 * @LastEditors: g05047
 * @LastEditTime: 2025-02-11 16:10:19
 * @Description: 
-->
<template>
  <el-dialog
    :="dialogAttrs"
    :style="dialogStyle"
    @close="hanleClose"
    v-model="dialogState.visiable"
  >
    <template #header="{ close }">
      <div class="hp-dialog-header">
        <div class="hp-dialog-header-title">
          {{ dialogAttrs.title }}
        </div>
        <div class="hp-dialog-header-tools">
          <div class="tool-item">
            <el-icon @click="dialogAttrs.fullscreen = !dialogAttrs.fullscreen"><FullScreen /></el-icon>
          </div>
          <div class="tool-item">
            <el-icon size="18px" @click="close"><Close /></el-icon>
          </div>
        </div>
      </div>
    </template>
    <div class="hp-dialog-body">
      <slot></slot>
    </div>
    <template #footer v-if="showFooter">
      <div class="dialog-footer">
        <el-button @click="hanleClose">取消</el-button>
        <el-button type="primary" @click="hanleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, reactive, watch, watchEffect, useAttrs } from 'vue';
import { FullScreen, Close } from '@element-plus/icons-vue'

import { isNumber } from '@hp/utils/data.js'

const emits = defineEmits([
  'close', 'confirm',
  'update:modelValue'
])

const attrs = useAttrs()

const props = defineProps({
  // 距离顶部的高度
  top: { type: String, default: '10vh' },
  // 标题
  title: { type: String, default: '提示' },
  // 宽邸
  width: { default: '50%' },
  // 高度
  height: { type: [String, Number], default: '60%' },
  // 是否显示全屏图标
  showFull: { type: Boolean, default: true },
  // 是否显示关闭图标
  showClose: { type: Boolean, default: true },
  // 是否显示底部
  showFooter: { type: Boolean, default: true },
  // 是否可见
  modelValue: { type: Boolean, default: false },
  // 是否添加到 body
  appendToBody: { type: Boolean, default: true }
})

const dialogState = reactive({
  visiable: props.modelValue
})
const dialogAttrs = reactive({
  top: props.top,
  width: props.width,
  title: props.title,
  class: `hp-dialog ${attrs.class || ''}`,
  draggable: true,
  showClose: false,
  fullscreen: false,
  appendToBody: props.appendToBody,
  destroyOnClose: true,
  closeOnClickModal: false,
  closeOnPressEscape: false,
})
const dialogStyle = computed(() => {
  if (!dialogAttrs.fullscreen) {
    return { ...dealHeight(props.height) }
  } else {
    return {}
  }
})
const dealHeight = (height) => {
  let flag = true
  if (isNumber(height)) {
    height = `${height}px`
  } else {
    if (!(height.endsWith('px') || height.endsWith('%') || height.endsWith('vh'))) {
      console.warn('dialog height属性属于不规范，需要已【px,%,vh】结尾！')
      flag = false
    }
  }
  return flag ? { height } : {}
}
const hanleClose = () => {
  emits('close')
}
const hanleConfirm = () => {
  emits('confirm')
}

watch(
  () => dialogState.visiable,
  (nv) => {
    emits('update:modelValue', nv)
  }
)
watchEffect(() => {
  dialogState.visiable = props.modelValue
})

</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
.hp-dialog {
  display: flex;
  flex-direction: column;
  padding: 0px;
  transform: translate(0, 0);
  &-header {
    display: flex;
    align-items: center;
    color: #000;
    font-size: 16px;
    &-tools {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: right;
      .tool-item {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
  &-body {
    flex: 1;
    min-height: 50px;
    padding: 12px;
    // display: flex;
    // flex-direction: column;
  }
  .el-dialog__header {
    padding: 12px;
    border-bottom: 1px solid #dcdcdc;
  }
  .el-dialog__body{
    flex: 1;
    min-height: 50px;
    display: flex;
    flex-direction: column;
  }
  .el-dialog__footer {
    padding: 8px 12px;
    border-top: 1px solid #dcdcdc;
  }
}
.ͼ1 {
  border: 1px solid #dcdcdc;
  &.cm-focused {
    outline: none !important;
  }
}
</style>

